<!-- 推荐 -->
<template>
    <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="300">
          <!-- 轮播图 -->
          <van-swipe :autoplay="2000" indicator-color="#FF8800">
            <van-swipe-item v-for="(item, idx) in swapList" :key="idx">
              <van-image lazy-load :src="item.img" fit="contain" height="40vw">
                <van-loading slot="loading" type="spinner" color="#FF8800"/>
              </van-image>
            </van-swipe-item>
          </van-swipe>
          <div style="background-color: #F5F5F5; height: 5px"></div>
          <!-- 九宫格 -->
          <van-grid :column-num="5" square icon-size="20px" :border="false">
            <van-grid-item v-for="(val,idx) in grids" :key="idx" :icon="val.img" :text="val.txt"/>
          </van-grid>
          <div style="background-color: #F5F5F5; height: 5px"></div>
<!--          <van-divider />-->
          <!-- 新闻内容列表 -->
          <ArticleList :articleList="articleList"></ArticleList>
        </van-list>
      </van-pull-refresh>
    </div>
</template>

<script>
import ArticleList from '@/views/article/ArticleList.vue'
export default {
  name: 'Recommend',
  components: {
    ArticleList
  },
  data () {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      articleType: 0, // 文章类型
      articleList: [], // 文章列表
      scrollTop: 0,
      swapList: [
        {
          img: 'http://laoapp.antegg.net/swap/1.jpg',
          link: 'www.baidu.com'
        },
        {
          img: 'http://laoapp.antegg.net/swap/2.jpg',
          link: 'www.baidu.com'
        },
        {
          img: 'http://laoapp.antegg.net/swap/3.jpg',
          link: 'www.baidu.com'
        },
        {
          img: 'https://img.yzcdn.cn/vant/apple-3.jpg',
          link: 'www.baidu.com'
        }
      ],
      grids: [
        {
          txt: '求职招聘',
          img: require('../../assets/icon/home.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '同胞互助',
          img: require('../../assets/icon/wx.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '我要爆料',
          img: require('../../assets/icon/job2.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '情感茶座',
          img: require('../../assets/icon/car.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '转让创投',
          img: require('../../assets/icon/findjob.png'),
          link: 'www.baidu.com'
        }
      ]
    }
  },
  methods: {
    onLoad () {
      setTimeout(() => {
        if (this.refreshing) {
          this.articleList = []
          this.refreshing = false
        }
        // 加载文章列表
        this.$api.getArticleListReq({ type: this.articleType })
          .then(
            (resp) => {
              this.articleList = resp.articleList
            }
          )
          .catch(
            (err) => {
              console.log('获取文章列表失败' + err)
            }
          )
        this.loading = false
        this.finished = true
      }, 1000)
    },
    onRefresh () {
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    onScroll () {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  mounted () {
    this.onLoad()
  },
  activated () {
    console.log('activated')
    window.addEventListener('scroll', this.onScroll)
    window.scroll(0, this.scrollTop)
  },
  deactivated () {
    console.log('deactivated')
    window.removeEventListener('scroll', this.onScroll)
  }
}
</script>

<style scoped>
</style>
